<template>
    <div class="img-dialog">
        <el-dialog
            custom-class="custom-img-dialog"
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            width="100%"
            top="0"
            :modal="false"
            :lock-scroll="false">
            <img :src="image" alt="" v-viewer="option">
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script lang="ts">
    import { Vue, Component, Prop } from 'vue-property-decorator';
    @Component
    export default class imagePreview extends Vue {
        @Prop({
            default: ''
        }) image!:string
        dialogVisible = false
        openDialog () {
            this.dialogVisible = true
        }
        closeDialog () {
            this.dialogVisible = false
        }
        option = {
            "inline": true, 
            "button": false, 
            "navbar": false, 
            "title": false, 
            "toolbar": true, 
            "tooltip": true, 
            "movable": true, 
            "zoomable": true, 
            "rotatable": true, 
            "scalable": true, 
            "transition": true,
            "fullscreen": true, 
            "keyboard": true, 
            "url": "data-source"
        }
    }
</script>

<style lang="scss" scoped>
    .el-dialog__body{
        img{
            width: 100%;
        }
    }
</style>
<style lang="scss">
    .img-dialog{
        .el-dialog__wrapper{
            width: 30%;
            height: min-content;
            max-height: 100%;
            .el-dialog.custom-img-dialog{
                margin: 0;
                display: inline-block;
                .el-dialog__header{
                    height: 30px;
                    padding: 0;
                    .el-dialog__headerbtn{
                        top: 0;
                        font-size: 26px;
                    }
                }
                .el-dialog__footer{
                    display: none;
                }
            }
        }
    }
</style>
